<template>
  <div class="pageNewsMain">
   <PageHeader :lang="lang"></PageHeader>
    <!--新闻列表-->
    <div style="overflow:hidden; position: relative" id="pageBody">

      <div class="pageNews">
        <div class="left">
          <router-link to="/news/index">{{lang['index_Footer_News']}}</router-link>
          <span :class="{active: parseInt(newType) === 1}" @click="getArticleList('', 1)">{{lang['news']}}</span>
          <span :class="{active: parseInt(newType) === 3}" @click="getArticleList('', 3)">{{lang['enterpriseNews']}}</span>
        </div>
        <div class="right">
          <div class="noNews" v-show="total === 0">
            <img src="../../assets/images/noNews.png">
            {{newType === 1 ? lang['42017'] : lang['news_not_enterprise']}}
          </div>
          <div class="news_list">
            <ul>
              <li v-for="item in newslist">
                <a @click='news_details(item.Keywords)'>
                  <div class="tupian">
                    <img :src="item.Icon">
                    <div class="data">
                      <p>{{lang[formatDate2(item.CreateTime, 'MM')]}}</p>
                      <em>{{formatDate3(item.CreateTime, 'dd')}}</em>
                      <p>{{formatDate(item.CreateTime, 'yyyy')}}</p>
                    </div>
                  </div>
                  <h3 class="title">{{item.Title}}</h3>
                  <p class="words">{{item.Introduce}}</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>


      <SwPaging
      :total="total"
      :pageSize="pageSize"
      :pageRange="pageRange"
      :pageIndex="pageIndex"
      :lang="lang"
      @jumpPage="jumpPage"></SwPaging>

    </div>
    <!--新闻中心-->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import Utils from '@/utils/Utils.js'
import SwPaging from '@/components/SwPaging/index.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      newslist: '',
      pageIndex: 1, // 当前页
      pageSize: 9, // 每页多少条
      pageRange: 7, // 页码条范围，例如8就是显示1-7的页码条
      total: 0,
      newType: 1
    }
  },
  components: {
    SwPaging
  },
  watch: {
    langKey () {
      this.getArticleList('', this.newType)
    }
  },
  methods: {
    formatDate (date) {
      return Utils.formatDate(new Date(date), 'yyyy')
    },
    formatDate2 (date) {
      return Utils.formatDate(new Date(date), 'MM')
    },
    formatDate3 (date) {
      return Utils.formatDate(new Date(date), 'dd')
    },
    news_details (keywords) {
      this.$router.push({
        path: '/news/detail',
        query: {
          keywords: keywords,
          newType: this.newType
        }
      })
    },
    getArticleList (no, num) {
      this.newType = num
      // 优先读取url里的参数
      // let urlCurrentrStr = this.$route.params.currentPage ? this.$route.params.currentPage : 1
      // this.pageIndex = urlCurrentrStr
      this.$http.post('Article/GetArticleList', {
        pageIndex: no || this.pageIndex,
        pageSize: this.pageSize,
        articleType: this.newType
      }, {
        ignorableCodes: '42017'
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.newslist = res.Data || []
          Utils.fixNewDateStringWithArrayForIE(this.newslist, 'CreateTime')
          this.total = res.TotalItem
        }
      })
    },
    jumpPage (no) {
      this.getArticleList(no, this.newType)

    //  history.replaceState(null, '', '/news/index/' + no)
    }
  },
  mounted () {
    this.newType = this.$route.query.newType || 1
    this.getArticleList('', this.newType)
  }
}
</script>

<style lang="less">
.pageNewsMain {
  background: #14141c;

      .pageNews {
        width: 1200px;
        margin: 40px auto 0;
        display: flex;
        justify-content: space-between;

        .left {
          width: 200px;

          a {
            display: inline-block;
            width: 100%;
            height: 48px;
            line-height: 48px;
            color: #fff;
            text-indent: 60px;
            background-color: #3782FF;
            background-image: url(./images/menu.png);
            background-repeat:  no-repeat;
            background-position: 34px center;
          }
          span {
            display: block;
            width: 200px;
            height: 48px;
            line-height: 48px;
            background: #152132;
            text-indent: 60px;
            color: #fff;
            cursor: pointer;

            &:hover{
              background: #364A6E;
            }
          }
          span.active {
            background-color: #364A6E;
          }
        }

        .right{
          position: relative;
          margin-left: 20px;
          width: 100%;
        }
      }
      .news_list {
        ul {
          display: flex;
          flex-flow: row wrap;
        }

        li {
          width: 30%;
          min-height: 320px;
          padding: 20px 0;
          margin-right: 5%;

          &:nth-of-type(3n) { margin-right: 0;}

          a {
            display: block;

            .tupian {
              position: relative;

              img {
                display: block;
                max-width: 100%;
                height: auto;
                transition: all .3s;
                border-radius: 4px;
              }

              .data {
                position: absolute;
                top: -14px;
                left: 0;
                padding: 5px 10px;
                box-shadow: 0 2px 6px 0 rgba(0,0,0,0.25);
                border-radius: 4px;
                background-color: white;
                text-align: center;

                p {
                  font-size: 14px;
                  color: #333;
                }

                em {
                  font-size: 16px;
                  text-align: center;
                  color: #3782FF;
                  padding: 8px 0;
                  font-weight: bold;
                  display: inline-block;
                }
              }
            }
          }

          .title {
            font-size: 16px;
            height: 24px;
            line-height: 24px;
            margin: 15px 0;
            font-weight: bold !important;
            color: #eee;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            /*word-break: break-all;*/
            overflow: hidden;
          }

          .words {
            color: #ccc;
            font-size: 14px;
            line-height: 20px;
            height: 42px;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            /*word-break: break-all;*/
            overflow: hidden;
          }
          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }
  .noNews{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%,-50%);
    color: #fff;
    text-align: center;
    img {
      display: block;
      margin: 0 auto;
    }
  }
}

@media screen and (max-width:1200px){
  .pageNewsMain .pageNews {width: auto; margin: 40px 16px 0; }
}

@media screen and (max-width:960px){
  .pageNewsMain .news_list li {width: 49%; margin-right:0;}
  .pageNewsMain .news_list li:nth-of-type(2n + 1){margin-right: 2%;}
}
</style>
